<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="">
          <GradeSelect v-model="searchForm.grade" />
        </el-form-item>
        <el-form-item>
          <ClassSelect v-model="searchForm.class" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.status" clearable placeholder="请选择综合测试完成状态">
            <el-option :value="0" label="未完成" />
            <el-option :value="1" label="已完成" />
          </el-select>
        </el-form-item>
        <el-form-item prop="" label="">
          <el-input v-model="searchForm.search" placeholder="按学生姓名搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="user_id" label="学生ID" />
        <el-table-column prop="user_info.name" label="姓名/昵称" />
        <el-table-column prop="user_info.grade.grade_name" label="年级" />
        <el-table-column prop="user_info.class_name" label="班级" />
        <el-table-column prop="majoring" label="添加意向专业" align="center">
          <template slot-scope="t">
            <i v-if="t.row.majoring" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="ranking" label="优势科目排序" align="center">
          <template slot-scope="t">
            <i v-if="t.row.ranking" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="scheme" label="生成最佳方案" align="center">
          <template slot-scope="t">
            <i v-if="t.row.scheme" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column prop="generate" label="综合测试完成状态测试" align="center">
          <template slot-scope="t">
            <i v-if="t.row.generate >= 1" class="el-icon-success" style="color: rgba(25,137,250,1)" />
            <i v-else class="el-icon-error" style="color: #C0C4CC" />
          </template>
        </el-table-column>
        <el-table-column label="完成时间" align="center">
          <template slot-scope="s">
            <span>{{ s.row.create_time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <div>
        <el-pagination
          class="pagination"
          :current-page="table.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </WrapPagination>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import GradeSelect from './components/grade-select'
import ClassSelect from './components/class-select'
import { getXkCompositeDetails } from '../../api/statistics'
export default {
  name: 'CareerComplex',
  components: {
    GradeSelect: GradeSelect,
    ClassSelect: ClassSelect
  },
  mixins: [TableMixin],
  data() {
    return {
      searchForm: {
        grade: '',
        search: '',
        status: '',
        class: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      return this.wrapList(getXkCompositeDetails, {
        generate: this.searchForm.status,
        search: this.searchForm.search,
        grade_id: this.searchForm.grade,
        class_name: this.searchForm.class
      })
    }
  }
}
</script>

<style scoped>

</style>
